<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>笑脸</title>
	</head>
	<style>
		.d1{
			width: 350px;
			height: 350px;
			background-color: #ffaa00;
			border-radius: 50%;
			position: relative;
		}
		.left-white{
			width: 110px;
			height: 20px;
			background-color: #ffffff;
			border-radius: 20px;
			position: relative;
			left: 45px;
			top: 80px;
		}
		.left-black{
			width: 20px;
			height: 20px;
			background-color: #000000;
			border-radius: 50%;
			position: relative;
			left: 0px;
			top: 0px;
		}
		.right-white{
			width: 110px;
			height: 20px;
			background-color: #ffffff;
			border-radius: 20px;
			position: relative;
			left: 190px;
			top: 60px;
		}
		.right-black{
			width: 20px;
			height: 20px;
			background-color: #000000;
			border-radius: 50%;
			position: relative;
			left: 0px;
			top: 0px;
		}
		.left-check{
			width: 80px;
			height: 80px;
			background-color: #ffc0cb;
			border-radius: 50%;
			position: relative;
			left: 30px;
			top: 80px;
			z-index: 200;
		}
		.right-check{
			width: 80px;
			height: 80px;
			background-color: #ffc0cb;
			border-radius: 50%;
			position: relative;
			left: 235px;
			top: 2px;
			z-index: 200;
		}
		.smile{
			width: 210px;
			height: 210px;
			border-top:10px solid black;
			border-left:10px solid black;
			border-radius:50%;
			transform:rotate(226deg);
			position:relative;
			left: 64px;
			top: -93px;
		}
		
	</style>
	<body>
		<div class="d1">
			<div class="left-white">
				<div class="left-black"></div>
			</div>
			
			<div class="right-white">
				<div class="right-black"></div>
			</div>
			
			<div class="left-check"></div>
			<div class="right-check"></div>
			<div class="smile"></div>
		</div>
	</body>
</html>